<template>
  <form-box headText="订单明细">
    <el-button size="small" @click.native="addLine" slot="btn">增加明细</el-button>
    <el-collapse v-model="lineListCol" @change="handleLineChange" accordion>
      <el-collapse-item v-for="(item, index) in lineList"
                        :key="index"
                        :title="item.cst_mold_no"
                        :name="index"
                        @click.native="" >
        <el-form label-width="100px" inline>

          <el-form-item label="产品类型" label-width="100px">
            <!--<el-input v-model="reqLineData.cst_order_line.type"></el-input>-->
            <el-select
              v-model="typeObj"
              clearable
              placeholder="产品类型"
              @change="typeChange">
              <el-option
                :disabled="!isEdit_line"
                v-for="x in options_line_type"
                :key="x.value"
                :label="x.label"
                :value="x">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户模号" label-width="100px">
            <el-input v-model="item.cst_mold_no" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="制品材料" label-width="100px">
            <el-input v-model="item.material" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="腔/芯材料" label-width="100px">
            <el-input v-model="item.cavity_material" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="正式开模日期" label-width="100px">
            <el-date-picker
              :disabled="!isEdit_line"
              v-model="item.start_date"
              align="right"
              type="date"
              placeholder="正式开模日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="首次试模日期" label-width="100px">
            <el-date-picker
              :disabled="!isEdit_line"
              v-model="item.first_try_date"
              align="right"
              type="date"
              placeholder="首次试模日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="交货日期" label-width="100px">
            <el-date-picker
              :disabled="!isEdit_line"
              v-model="item.delivery_date"
              align="right"
              type="date"
              placeholder="交货日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="单位" label-width="100px">
            <el-input v-model="item.unit" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="单价" label-width="100px">
            <el-input v-model="item.up" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="数量" label-width="100px">
            <el-input v-model="item.count" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="金额" label-width="100px">
            <el-input v-model="item.price" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <el-form-item label="备注" label-width="100px">
            <el-input v-model="item.remark" :disabled="!isEdit_line"></el-input>
          </el-form-item>

          <br/>
          <el-form-item label="是否开启编辑" style="float: right" label-width="100px">
            <el-switch
              v-model="isEdit_line"
              on-color="#13ce66"
              off-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-button type="success" style="margin-bottom: 10px" @click.native="saveLine(index)">
            保存行头信息
          </el-button>
          <el-button type="danger" style="margin-bottom: 10px" @click.native="delLine(index)">
            删除行信息
          </el-button>
        </el-form>

        <span class="hr-text">制品信息</span>
        <el-button size="small" @click.native="addLineProduct">增加</el-button>
        <hr class="hr-color"/>

        <el-table :data="reqLineProductsData.prod_Info"
                  border fit highlight-current-row style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column align="center" label="制品编号" max-width="20%">
            <template scope="scope">
              <span v-show="!changeProductEdit">{{scope.row.cst_prod_no}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.cst_prod_no"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="制品名称" max-width="20%">
            <template scope="scope">
              <span v-show="!changeProductEdit">{{scope.row.cst_prod_name}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.cst_prod_name"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="腔数" max-width="20%">
            <template scope="scope">
              <span v-show="!changeProductEdit">{{scope.row.cavity_total}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.cavity_total"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="模型" max-width="20%">
            <!--<template scope="scope">
              <el-upload
                action="上传地址"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">单个文件大小不超过5MB</div>
              </el-upload>
              &lt;!&ndash;<span v-show="!changeProductEdit">{{scope.row.prod_model_pic.name}}/{{scope.row.prod_model_pic.url}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.prod_model_pic.name"></el-input>&ndash;&gt;
            </template>-->
          </el-table-column>
          <el-table-column align="center" label="操作" max-width="20%">
            <template scope="scope">
              <!--<el-button :type="changeProductEdit?'success':'primary'"
                         size="small"
                         @click.native='saveLineProduct(item.order_line_id,index)'
                         icon="edit">{{changeProductEdit?'保存':'编辑'}}</el-button>-->
              <el-button :type="changeProductEdit?'success':'primary'"
                         size="small"
                         @click.native='changeProductEdit=!changeProductEdit'
                         icon="edit">{{changeProductEdit?'完成':'编辑'}}</el-button>
              <el-button
                size="small"
                type="danger"
                @click="delLineProduct(scope.row.prod_id,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-collapse-item>
    </el-collapse>
  </form-box>
</template>
<script>
  import {
    cstOrderLineInfo,
    cstOrderModifyLine,
    delCstOrderLine,
    prodModify,
    delCstLineProduct,
  } from '@/api/cstOrder/customerOrder'
  import { format } from '@/utils/dateFmt'
  import formBox from '../../../components/formBox.vue'
  export default {
    components:{
      formBox
    },
    props:[
      'lineList',
      'pickerOptions',
      'projectId'
    ],
    data(){
      return {
        lineListCol:'',
        isEdit_line:true,
        changeProductEdit:false,
        curIndex:null,
        typeObj:{
          label:null,
          value:null
        },
        reqLineProductsData:{
          client_type:1,
          order_line_id:null,
          prod_Info:[]
        },
        reqLineData:{
          client_type:1,
          project_id:null,
          cst_order_line:{
            cavity_material:null,
            count:null,
            cst_mold_no:null,
            delivery_date:null,
            first_try_date:null,
            material:null,
            order_line_id:null,
            price:null,
            remark:null,
            start_date:null,
            type:null,
            type_name:null,
            unit:null,
            up:null,
            prod_list:[]
          }
        },
        options_line_type: [
          {
            value: '1',
            label: '非五金模'
          },
          {
            value: '2',
            label: '手板'
          },
          {
            value: '3',
            label: '模具'
          },
          {
            value: '4',
            label: '注塑件'
          },
          {
            value: '5',
            label: '加工件'
          },
          {
            value: '6',
            label: '五金模'
          }
        ],
      }
    },
    methods:{
      addLine(){  //添加行信息
        this.$prompt('请输入客户模号名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          let line = {
            cavity_material:null,
            count:null,
            cst_mold_no:value,
            delivery_date:null,
            first_try_date:null,
            material:null,
            order_line_id:null,
            price:null,
            remark:null,
            start_date:null,
            type:null,
            type_name:null,
            unit:null,
            up:null,
            prod_list:[]
          }
          this.lineList.push(line)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      saveLine(index){  //折叠框中保存修改行信息
        this.reqLineData.cst_order_line = this.lineList[index]
        this.reqLineData.project_id = this.projectId;
        this.reqLineData.cst_order_line.prod_list = this.reqLineProductsData.prod_Info

        //下面对三个日期参数做处理,转换成指定格式的字符串
        if(new Date(this.reqLineData.cst_order_line.delivery_date)){
          this.reqLineData.cst_order_line.delivery_date = format(new Date(this.reqLineData.cst_order_line.delivery_date),'yyyy-MM-dd')
        }
        if(new Date(this.reqLineData.cst_order_line.first_try_date)){
          this.reqLineData.cst_order_line.first_try_date = format(new Date(this.reqLineData.cst_order_line.first_try_date),'yyyy-MM-dd')
        }
        if(new Date(this.reqLineData.cst_order_line.start_date)){
          this.reqLineData.cst_order_line.start_date = format(new Date(this.reqLineData.cst_order_line.start_date),'yyyy-MM-dd')
        }

        cstOrderModifyLine(this.reqLineData)  //调用增加行信息的接口
          .then(res => {
            this.lineListCol = ''
            this.$message({
              type: 'success',
              message: '保存行信息成功,您可以继续添加制品信息或关闭页面'
            });
          })
          .catch(err => {
            console.log(err)
            this.$message.error('保存失败!')
          })
      },
      delLine(index){ //删除行信息
        this.$confirm('此操作将删除当前行信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.lineList[index].order_line_id){
            let req_delLine = {
              client_type:1,
              order_line_id:this.lineList[index].order_line_id
            }
            delCstOrderLine(req_delLine)
              .then(res => {
                this.lineList.splice(index,1)
                this.lineListCol = ''
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message.error('删除失败')
              })
          }else{
            this.lineList.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleLineChange(val){  //当打开的折叠面板发生改变时调用获取行明细接口
        if(val !== ''){
          this.curIndex = parseInt(val)
          if(this.lineList[val].order_line_id){
            let req_lineInfo = {
              client_type:1,
              order_line_id:this.lineList[val].order_line_id
            }

            cstOrderLineInfo(req_lineInfo)  //获取行信息明细
              .then(res => {
                this.typeObj.label = res.type_name
                this.typeObj.value = res.type

                //this.lineList[val] = res
                this.$set(this.lineList,val,res)  //使用$set赋值,用于避开 Vue 不能检测属性被添加的限制(保持响应式)
                this.reqLineProductsData.prod_Info = res.prod_list

                //这里把几个日期参数转成Date对象再赋值,因为element ui的日期组件目前只支持接收 Date对象的值. 否则会报错
                /*this.$set(this.lineList[val],delivery_date,new Date(Date.parse(res.delivery_date)))
                this.$set(this.lineList[val],first_try_date,new Date(Date.parse(res.first_try_date)))
                this.$set(this.lineList[val],start_date,new Date(Date.parse(res.start_date)))*/
                this.lineList[val].delivery_date = new Date(Date.parse(res.delivery_date))
                this.lineList[val].first_try_date = new Date(Date.parse(res.first_try_date))
                this.lineList[val].start_date = new Date(Date.parse(res.start_date))

              })
              .catch(err => {
                console.log(err)
              })

          }
        }
      },
      addLineProduct(){ //新增一行制品明细
        this.changeProductEdit = true
        let product = {
          cavity_total:'请填写',
          cst_prod_name:'请填写',
          cst_prod_no:'请填写',
          prod_id:'',
          prod_model_pic:''
        }
        this.reqLineProductsData.prod_Info.push(product)
      },/*
      saveLineProduct(lineId,lineIndex){  //保存行 制品明细
        if(this.changeProductEdit){
          this.changeProductEdit = false
          this.reqLineProductsData.order_line_id = lineId

          prodModify(this.reqLineProductsData) //调用接口保存当前行信息的 制品明细
            .then(res => {
              this.$message({
                type: 'success',
                message: '保存制品信息成功,您可以继续添加或关闭页面'
              });
              let req_lineInfo = {
                client_type:1,
                order_line_id:lineId
              }
              cstOrderLineInfo(req_lineInfo) //保存当前行信息的制品明细成功之后 再调用获取行信息明细的方法取一下数据
                .then(res => {
                  this.lineList[lineIndex] = res
                  this.reqLineProductsData.prod_Info = res.prod_list
                })
                .catch(err => {
                  console.log(err)
                })
            })
            .catch(err => {
              console.log(err)
            })
        }else{
          this.changeProductEdit = true
        }
      },*/
      delLineProduct(proId,index){  //删除行 制品明细
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(proId){  //如果制品id存在则调用接口删除,否则就只删除本地变量里的值
            let req_delPro = {
              client_type:1,
              prod_id:[proId]
            }
            delCstLineProduct(req_delPro)
              .then(res => {
                console.log(this.reqLineProductsData.prod_Info)
                this.reqLineProductsData.prod_Info.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message.error('删除失败')
              })
          }else{
            this.reqLineProductsData.prod_Info.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      typeChange(val){
        if(val){
          this.lineList[this.curIndex].type = this.typeObj.value
          this.lineList[this.curIndex].type_name = this.typeObj.label
        }
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
